<template>
    <view class="p-top24 p-bot30" :style="{ '--color': color }">
        <navBar title="服务卡详情"></navBar>

        <CardInfo :Buy="info.is_buy == 1" :pageData="info" :cardId="id" @CardDetail="CardDetail"></CardInfo>
        <Serverlist @handleShare="handleShare" :Buy="info.is_buy == 1" :pageData="info.services_content"></Serverlist>

        <Richtext :pageData="info.content"></Richtext>
        <Store :pageData="info.store_list"></Store>
    </view>
</template>

<!-- is_buy 1 已购买 0 未购买 -->
<script>
    import { mapState } from 'vuex';
    import CardInfo from '@/subCard/components/CardInfo.vue';
    import Serverlist from '@/subCard/components/Serverlist.vue';
    import Store from '@/subCard/components/Store.vue';
    import Richtext from '@/subCard/components/Richtext.vue';
    export default {
        components: {
            CardInfo,
            Serverlist,
            Store,
            Richtext
        },
        data() {
            return {
                headImg: 'https://imgcdn.mogoie.com/6099/1709797684310.JPG',
                id: '',
                pay_log_id: '',
                info: '',
                shareItem: ''
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            if (opt.pay_log_id) this.pay_log_id = opt.pay_log_id;
        },
        onShow() {
            this.CardDetail();
            // #ifdef MP-WEIXIN
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                this.CardDetail();
            }
            // #endif
        },
        methods: {
            CardDetail() {
                this.$http
                    .get({
                        url: '/TimeCardApi/newTimesCardDetail',
                        data: {
                            id: this.id,
                            pay_log_id: this.pay_log_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.info = result;
                    });
            },

            handleShare(subItem) {
                this.shareItem = subItem;
            }
        },

        computed: {
            ...mapState(['color', 'share'])
        },
        onShareAppMessage(res) {
            if (res.from === 'button') {
                // 如果是从按钮触发的分享，则可以根据 shareId 设置不同的分享参数
                return {
                    title: `${this.shareItem.name}`, // 动态设置分享标题
                    path: `/pages/index/index?id=${this.shareItem.id}&pageType=32&share_v_id=${this.vid}`, // 动态设置跳转路径
                    imageUrl: `${this.shareItem.img}` // 分享图片链接
                };
            } else {
                return {
                    title: this.share.title,
                    desc: share.desc,
                    path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
                    imageUrl: this.share.imageUrl
                };
            }
        }
    };
</script>

<style>
    page {
        background-color: #f2f2f2;
    }
</style>
